<div id="ApiKeyContainer">
    <p>
        <b>设置第三方应用程序接口密匙（API KEY）。</b>
    </p>
    <p><small>若此用户是管理员用户，那么密匙将可以"管理用户","管理所有服务器","获取高级信息"</small></p>
    <p><small>若此用户是普通用户，则仅仅能管理其名下的所有服务器与获取部分信息。</small></p>

    <div class="input-group">
        <span class="input-group-addon">API KEY</span>
        <input type="text" class="form-control" v-model="API_KEY" placeholder="关闭">
    </div>

    <p style="color: rgb(230, 55, 55);">此字段至关重要，切勿泄露，复制给其他人。</p>

    <p>留空则代表关闭此用户 API 功能 |
        <a href="https://github.com/Suwings/MCSManager/wiki/API-Documentation" target="_blank"><b>接口开发文档（推荐）</b></a>
    </p>

    <button class="btn btn-success" v-on:click="updateKey()">
        更新 KEY
    </button>
    <button class="btn btn-success" v-on:click="deleteKey()">
        删除/关闭 KEY
    </button>
    &nbsp;|&nbsp;
    <button class="btn btn-danger" v-on:click="TOOLS.popWindClose();">
        关闭
    </button>
</div>
<script>
    new Vue({
        el: "#ApiKeyContainer",
        data: {
            API_KEY: ''
        },
        methods: {
            updateKey: function () {
                var that = this;
                WS.sendMsg('apikey/update', PAGE.username, function (obj) {
                    var API_KEY = obj.ResponseValue;
                    that.API_KEY = API_KEY;
                });
            },
            deleteKey: function () {
                var that = this;
                WS.sendMsg('apikey/delete', PAGE.username, function (obj) {
                    var API_KEY = obj.ResponseValue;
                    that.API_KEY = API_KEY;
                });
            }
        },
        mounted: function () {
            var that = this;
            WS.sendMsg('apikey/get', PAGE.username, function (obj) {
                var API_KEY = obj.ResponseValue;
                that.API_KEY = API_KEY;
            });
        }
    });
</script>